CSS的選擇器分為基礎選擇器以及複合選擇器
本日將將繼續說明複合選擇器

複合選擇器可以更準確更高效的選擇元素(標籤)

• 是由兩個或多個基礎選擇器透過不同方式組合而成
• 常用的複合選擇器 : 後代選擇器、子選擇器、併集選擇器、偽類選擇器等

1. 後代選擇器

又稱為包含選擇器，可以選擇父元素裡面的子元素

元素1 元素2 { 樣式
}
/*上述語法表示選擇1裡面的所有元素2(後代元素)*/

ex:
ul li{ color: red}

/* ul和li中間用空格隔開
ul是父級元素 li是子級元素 最終選擇的是ul裡面的li */

ex:
div ul li{ color: red} (選定div內lu標籤內的li標籤)

/* 也可以三個元素這樣使用，最終也會選定到li
或是 div li { color: red} (這樣的意思也是選定div裡面的li標籤)
*/

備註 :

• 也可加class 使用.div il li a選擇器

2. 子選擇器

子元素選擇器只會選擇最近一級子元素

元素1 > 元素2{
}
div >p {　樣式
｝
/* 選擇div裡面最近一級p元素*/

備註:

• 元素1和元素2中間用>隔開
• 元素1是父級 元素2是子級 最終選擇的是元素2
• 元素2必須是親兒子其他的都不歸此選擇器管

3.并級選擇器

并級選擇器可以選擇多組標籤，同時為他們定義相同的樣式
通常用於集體聲明

并級選擇器用法:
將各選擇器通過，連接而成，任何形式的選擇器皆可使用

元素1,元素2{樣式聲明}
ex:
ul,div{ color: red}
ex:
div,table,ul,li{color:blue}
四個標籤內所有的字體顏色都改為藍色

4.偽類選擇器
偽類選擇器書寫的特點是用冒號:表示比如:hover , :first-child

連接偽類選擇器
a:link 選擇未被訪問的連接
a:visited 選擇已被訪問的連接
a:hover 選擇滑鼠指針位於其上的連接
a:active 選擇活動連接(滑鼠按下未彈起的

/* a 是標籤選擇器 所有的連接 */
a{
color : gray;
}
/* :hover是連接偽類選擇器 鼠標經過*/
a:hover{
color: red;
}

:force 偽類選擇器

用於選取獲得焦點的表單元素
焦點就是光標，一般情況<input>類表單元素才能獲取
所以此選擇器主要針對於表單元素

input:focus{
background-color:yellow;
}